<template>
  <div class="hole-main">
    <div class="card">
      <el-date-picker v-model="form.time" type="date" placeholder="选择日期"/>
      <el-input placeholder="请输入关键字" clearable class="ipt"></el-input>
      <el-button icon="el-icon-search" class="search" type="primary">搜索</el-button>
      <el-button icon="el-icon-add" class="search insert" type="primary">新建</el-button>
      <el-button icon="el-icon-upload" class="search insert" type="primary">上传数据</el-button>
    </div>
    <div class="card-data">
      <data-card :data-array="dataArray"></data-card>
    </div>

    <el-card-template
      title="昨日24小时用水趋势"
      left-title="昨日总用水量"
      left-value="1024.5t"
      bot-title="昨日总用电量"
      bot-value="1024.5t"
    >
      <el-chart :device-count-data="deviceCountData"></el-chart>
    </el-card-template>

    <div class="bottom-card">
      <el-card-template
        title="月能耗每日用能趋势"
        left-title="昨日总用水量"
        left-value="1024.5t"
        bot-title="昨日总用电量"
        bot-value="1024.5t"
      >
        <el-chart :device-count-data="deviceCountData"></el-chart>
      </el-card-template>
      <el-card-template
        title="年度12月份用能趋势"
        left-title="昨日总用水量"
        left-value="1024.5t"
        bot-title="昨日总用电量"
        bot-value="1024.5t"
      >
        <el-chart :device-count-data="deviceCountData"></el-chart>
      </el-card-template>
    </div>
  </div>
</template>

<script>
import './components/index' //引入所有的js
export default {
  data() {
    return {
      //顶部的form
      form: {
        time: ""
      },

      //data展示的数据
      dataArray: [
        {
          id: 1, name: "电", time: "2025-12-01 05:07：01", unit: '千瓦时', icon: "",
          yesDay: 1048.02,
          BeforeYesterday: 1048.02,
          dayRate: 0.22,
          thisMonth: 1048.02,
          lastMonth: 1048.02,
          monRate: -0.22,
          lastYear: 1048.02,
          thisYear: 1048.02,
        },
        {
          id: 1, name: "水", time: "2025-12-01 05:07：01", unit: '吨', icon: "",
          yesDay: 1048.02,
          BeforeYesterday: 1048.02,
          dayRate: 0.22,
          thisMonth: 1048.02,
          lastMonth: 1048.02,
          monRate: -0.22,
          lastYear: 1048.02,
          thisYear: 1048.02,
        },
        {
          id: 1, name: "碳排放量", time: "2025-12-01 05:07：01", unit: '千克', icon: "",
          yesDay: 1048.02,
          BeforeYesterday: 1048.02,
          dayRate: 0.22,
          thisMonth: 1048.02,
          lastMonth: 1048.02,
          monRate: -0.22,
          lastYear: 1048.02,
          thisYear: 1048.02,
        },
      ],

      // echarts展示内容
      deviceCountData:{
        xData: [
          "13:00","13:05","13:10","13:15","13:20","13:25",
          "13:30","13:35","13:40","13:45","13:50","13:55",
        ],
        series: [
          {
            name: "用水",
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
            color: "rgb(137,189,27)",
            areaColor: ["rgba(137, 189, 27, 0.3)", "rgba(137, 189, 27, 0)"],
          },
          {
            name: "用电",
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
            color: "rgb(0,136,212)",
            areaColor: ["rgba(0, 136, 212, 0.3)", "rgba(0, 136, 212, 0)"],
          },
        ]
      }
    }
  }
}
</script>


<style scoped lang="scss">
.hole-main {
  width: 100%;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  background: #f9fafa;

  .card {
    width: 100%;
    min-height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;

    .ipt {
      width: 273px;
      margin-left: 10px;
    }

    .search {
      background-color: #34bfa3;
      border: 1px solid #34bfa3;
      margin-left: 10px;
    }

    .insert {
      background-color: #00c6f0;
      border: 1px solid #00c6f0;
    }
  }

  .card-data {
    width: 100%;
    margin-top: 15px;
  }

  .bottom-card{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-top: 15px;
  }
}

</style>
